import React from 'react'
import { Actions, NameSpace } from "../../model/taskModel";
import { connect } from "react-redux";
import styles from "../../css/task.module.css";
import Config from "../../Config";
import { locationTo } from '../../utils/LocationUtil';
import * as locations from '../../const/locations';
import { repaymentRecord } from '../../service/TaskService'
import { getTOKEN ,getInfo} from '../../utils/StorageUtil'
import { NOTASK } from '../components/Default'
import Scroll from '../components/Bscroll/index'
import ProgressView from "../../view/ProgressView";

class RepayList extends React.Component {
  constructor(props) {
    super(props)
    this.CURRENT_PAGE = 1;
    this.PER_PAGE = 20;
    this.state = {
      repay_data: [],
      loading: false
    }
  }
  componentDidMount() {
    document.title = '任务回款记录'
    this.getRepayRecords({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE
    })
  }
  getRepayRecords = (params) => {
    this.setState({ loading: true });
    repaymentRecord({
      token: getTOKEN(),
      t_id: this.props.taskId?this.props.taskId:getInfo('ids').taskId,
      only_self: 1,
      ...params
    })
      .then(
        res => {
          this.setState({ loading: false });
          this.setState({
            repay_data: res.data.data,
            isShowMore: res.data.data.length === this.PER_PAGE,

          })
          this.props.setData(res.data)
          this.CURRENT_PAGE++;

        }
      )
      .catch(
        err => {
          console.log(err)
        }
      )
  }
  pullingUp = () => {
    this.getDelayList({
      current_page: this.CURRENT_PAGE,
      per_page: this.PER_PAGE
    })
  }
  render() {
    const { task_info } = this.props.TaskData?this.props.TaskData:getInfo('TaskInfo')
    return (
      <div className={styles['home']} style={{ paddingTop: '10px' }} >
        <div className={styles['container']} style={{ marginTop: '0', height: '99%' }} >
          <Scroll
            ref='scroll'
            click={true}
            bounce={true}
            pullUpLoad={true}
            pullUpLoadMoreData={this.pullingUp}
            isPullUpTipHide={true}
            isShowMore={this.state.isShowMore}
          >
            <RepayTotal task_info={task_info} />
            {this.state.repay_data.length === 0 && <NOTASK />}
            {this.state.repay_data.length > 0 &&
              <RepayItems repayData={this.state.repay_data} />
            }
          </Scroll>

        </div>
        <ProgressView visibility={this.state.loading} mode={ProgressView.MODE_MEDIUM} />

      </div>
    )
  }
}
const RepayTotal = ({ task_info: { repay_amount, received_rwd } }) => {
  return (
    <div className={styles['repay_total_wrapper']} style={{ color: '#fff' }} >

      <div className={styles['repay_total']}>

        <span >  总回款金额        </span>
        <span className={styles['repay_total_value']}>   {repay_amount}元        </span>
      </div><div className={styles['repay_total']}>

        <span > 总奖金：        </span>
        <span className={styles['repay_total_value']} >   {received_rwd}元        </span>
      </div>
    </div>
  )
}
const RepayItems = ({ repayData }) => {
  return (
    <div className={styles['debt_data']}>
      <div className={styles['debt_data_list']}>
        {
          repayData.map((item, index) => {
            return (
              <div>
                { item.return_money &&<RepayItem key={index} item={item} />}
              </div>
              
            )
          })
        }
      </div>
    </div>
  )
}
const RepayItem = ({item:{
  bg_return_money, // 回款金额 (分)
  return_money,                 
  create_time,    // 时间
  reward_ratio,  // 利率 (19% * 10000)
  check_status,                 
  name,           // 催客姓名
}}) => {
  console.log(return_money)
  return (

    <div className={styles['repay_item']}>
      <div className={styles['repay_item_line']}>
        <div className={styles['debt_key']} style={{ fontSize: '16px' }}>回款金额： {return_money}</div>
        <div style={{color:parseInt(check_status,10)===1?Config.BaseColor:Config.fontColor2}}>
                {parseInt(check_status,10)===1?'已清算':'待清算'}
            </div>
      </div>
      {return_money &&
        <div className={styles['repay_item_line']}>
          <span className={styles['debt_value']} >
            奖金：{ (Number(bg_return_money) * (Number(reward_ratio) / 1000000)).toFixed(2)}
          </span>
          <span className={styles['debt_key']}> {create_time}</span>
        </div>
      }
    </div>
  )
}
const LINEHEIGHT = '56px'
const AVATARHEIGHT = '40px'
const avatarStyle = {
  width: AVATARHEIGHT,
  height: AVATARHEIGHT,
  borderRadius: '50%',
  marginRight: '10px',
  overflow: 'hidden'
}
const avatarImgStyle = {
  width: AVATARHEIGHT
}
const mapStateToProps = state => {
  return {
    ...state[NameSpace]
  };
};
const mapDispatchToProps = dispatch => {
  return {
    taskTab(item) {
      let params = {
        taskTabIndex: item.taskTabIndex
      };
      dispatch(Actions.actionTaskTab(params));
    }
  };
};

export default connect(mapStateToProps, mapDispatchToProps)(RepayList);